﻿@page "/smith-chart/default-functionalities"

@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes two transmissions in the smith chart. Rendering smith chart can be changed by using the <b>Render Type</b> dropdown list in the properties panel.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render a smith chart with multiple series. Legend has been enabled to denote the series in smith chart.</p>
    <p>Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over a data point or tap a data point in touch enabled devices.</p>
    <p>More information about smithchart can be found in this <a target='_blank' href='https://ej2.syncfusion.com/blazor/documentation/smith-chart/getting-started'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <SfSmithChart RenderType="@ChartRenderType">
        <SmithChartTitle Visible="true" Text="Transmission details">
        </SmithChartTitle>
        <SmithChartLegendSettings Visible="true" Shape="Shape.Circle">
        </SmithChartLegendSettings>
        <SmithChartSeriesCollection>
            <SmithChartSeries Name="Transmission1" DataSource="@FirstTransmissionData" Resistance="resistance" Reactance="reactance"
                              EnableAnimation="true">
                <SmithChartSeriesTooltip Visible="true"></SmithChartSeriesTooltip>
                <SmithChartSeriesMarker Visible="true" Shape="Shape.Circle">
                    <SmithChartSeriesMarkerBorder Width="2">
                    </SmithChartSeriesMarkerBorder>
                </SmithChartSeriesMarker>
            </SmithChartSeries>
            <SmithChartSeries Name="Transmission2" DataSource='@SecondTransmissionData' Resistance="resistance" Reactance="reactance"
                              EnableAnimation="true">
                <SmithChartSeriesTooltip Visible="true"></SmithChartSeriesTooltip>
                <SmithChartSeriesMarker Visible="true" Shape="Shape.Circle">
                    <SmithChartSeriesMarkerBorder Width="2">
                    </SmithChartSeriesMarkerBorder>
                </SmithChartSeriesMarker>
            </SmithChartSeries>
        </SmithChartSeriesCollection>
    </SfSmithChart>
</div>
<div class="col-md-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width: 100%">
                <tbody>
                    <tr>
                        <td style="width:55%">
                            <div>Render Type</div>
                        </td>
                        <td>
                            <div>
                                <SfDropDownList TValue="string" TItem="RenderData" DataSource="@RenderDataSource" @bind-Value="@TypeValue">
                                    <DropDownListEvents TValue="string" TItem="RenderData" ValueChange="RenderTypeChange"></DropDownListEvents>
                                    <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings>
                                </SfDropDownList>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    .printIconCss {
        float: right;
        background: transparent;
        box-shadow: none;
        border-color: transparent;
        border-radius: 2px;
        color: inherit;
        font-size: 12px;
        text-transform: capitalize;
        margin-top: 4px;
        height: 28px;
        font-weight: 400;
        font-family: inherit;
    }

    .e-de-icon-Print:before {
        content: "\e723";
    }
</style>


@code {
    private RenderType ChartRenderType = RenderType.Impedance;
    private String TypeValue = "Impedance";

    public class SmithDataSource
    {
        public double? resistance { get; set; }
        public double? reactance { get; set; }
    };
    public List<SmithDataSource> FirstTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 10, reactance= 25 }, new SmithDataSource { resistance= 8, reactance= 6 },
        new SmithDataSource { resistance= 6, reactance= 4.5 }, new SmithDataSource { resistance= 4.5, reactance= 2 },
        new SmithDataSource { resistance= 3.5, reactance= 1.6 }, new SmithDataSource { resistance= 2.5, reactance= 1.3 },
        new SmithDataSource { resistance= 2, reactance= 1.2 }, new SmithDataSource { resistance= 1.5, reactance= 1 },
        new SmithDataSource { resistance= 1, reactance= 0.8 }, new SmithDataSource { resistance= 0.5, reactance= 0.4 },
        new SmithDataSource { resistance= 0.3, reactance= 0.2 }, new SmithDataSource { resistance= 0, reactance= 0.15 },
    };
    public List<SmithDataSource> SecondTransmissionData = new List<SmithDataSource> {
        new SmithDataSource { resistance= 20, reactance= -50 }, new SmithDataSource { resistance= 10, reactance= -10 },
        new SmithDataSource { resistance= 9, reactance= -4.5 }, new SmithDataSource { resistance= 8, reactance= -3.5 },
        new SmithDataSource { resistance= 7, reactance= -2.5 }, new SmithDataSource{ resistance= 6, reactance= -1.5 },
        new SmithDataSource { resistance= 5, reactance= -1 }, new SmithDataSource { resistance= 4.5, reactance= -0.5 },
        new SmithDataSource { resistance= 2, reactance= 0.5 }, new SmithDataSource { resistance= 1.5, reactance= 0.4 },
        new SmithDataSource { resistance= 1, reactance= 0.4 }, new SmithDataSource { resistance= 0.5, reactance= 0.2 },
        new SmithDataSource { resistance= 0.3, reactance= 0.1 }, new SmithDataSource { resistance= 0, reactance= 0.05 },
    };

    public class RenderData
    {
        public string Name { get; set; }
    }
    private List<RenderData> RenderDataSource = new List<RenderData> {
        new RenderData { Name = "Impedance"},
        new RenderData { Name = "Admittance"},
    };
    private void RenderTypeChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, RenderData> args)
    {
        this.TypeValue = args.Value;
        if (args.Value == "Admittance")
        {
            this.ChartRenderType = RenderType.Admittance;
        }
        else
        {
            this.ChartRenderType = RenderType.Impedance;
        }
    }
}